<template>
  <div class="img1" v-bind:style="{ 'background-image': 'url(' + bgimg + ')' }">
    <div class="img">
      <el-carousel
        @change="hahaha($event)"
        autoplay
        indicator-position="outside"
      >
        <el-carousel-item v-for="item in imagesBox" :key="item.id">
          <img class="albumPic" :src="item.idView" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  data() {
    return {
      imagesBox: [
        { id: 0, idView: require('./images/a.jpg') },
        { id: 1, idView: require('./images/b.jpg') }
      ],
      bgimg:
        'http://p1.music.126.net/sbeWfqnPtSfDClg4TTnYMQ==/109951166045738762.jpg?imageView&blur=40x20'
    }
  },
  methods: {
    hahaha(e) {
      switch (e) {
        case 1:
          this.bgimg =
            'http://p1.music.126.net/spN1JyQl5k-aVb1s8NF0lw==/109951166045750516.jpg?imageView&blur=40x20'
          break
        case 0:
          this.bgimg =
            'http://p1.music.126.net/sbeWfqnPtSfDClg4TTnYMQ==/109951166045738762.jpg?imageView&blur=40x20'
          break
      }
    }
  }
}
</script>

<style>
.el-carousel__indicators--outside {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.el-carousel__button {
  height: 10px;
  width: 10px;
  border-radius: 50%;
}
.el-carousel el-carousel--horizontal {
  height: 500px;
  background-color: red;
}
.img1 {
  transition: background-image 0.2vs linear;
  background-size: 6000px;
  background-position: center center;
  height: 300px;
}
.img {
  width: 1000px;
  height: 285px;
  margin: 0 auto;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.albumPic {
  height: 300px;
  width: 1000px;
}
</style>
